<template>
    <view class="index">
        <!-- #ifdef H5 -->
        <download-nav v-if="isShowDownload"></download-nav>
        <!-- #endif -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				title="金竹兑换"
				titleColor="#FFF"
                :border-bottom="false"
                :is-fixed="false"
                custom-class="nav-bg"
				:background="navBackground"
				back-icon-color="#FFF"
            > 
            </u-navbar>
        </u-sticky>
		
		<view class="main-box">
			<view class="desc-box">
				<view class="tit">当前可兑换金竹</view>
				<view class="num">{{widthDrawConfig.golden_bamboo}}</view>
				<image src="../../static/images/exchange_line.png" class="line-img" />
				<view class="sort-num-box row">
					<view class="num1">已兑换：<text>{{widthDrawConfig.already_cash}}</text></view>
					<view class="num2">兑现中：<text>{{widthDrawConfig.exchanging_cash}}</text></view>
				</view>
			</view>
			<view class="record-box">
				<view class="hd row">
					<view class="th">金竹子</view>
					<view class="th">现金</view>
					<view class="th">申请时间</view>
					<view class="th">状态</view>
				</view>
				<view class="bd">
					<view class="tr row" v-for="(record, index) in recordList" :key="index">
						<view class="td">{{ record.use_boobam }}</view>
						<view class="td">{{ record.money }}</view>
						<view class="td">{{ record.create_time }}</view>
						<view class="td">{{ record.status_text }}</view>
					</view>	
					<loading-footer :status="status" slotEmpty>
						<u-empty text="暂无记录~" slot="empty"></u-empty>
					</loading-footer>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="withdraw-btn" @tap="handleExchange">兑换现金</view>
		</view>

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getHome, getMenu, getBestList, getBambooRank, getSeckillTime, getSeckillGoods, getGoodsList, withdrawRecords } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare, getRegisterCoupon } from '@/api/app'
	import {
		applyWithdraw,
		getWithdrawConfig
	} from "@/api/user";


const app = getApp()
export default {
    data() {
        return {
			bambooNum: '',
			widthDrawConfig: {},
			
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
            remainTime: '',
            navBg: 0,
            navList: [],
            news: [],
            seckill: {},
            seckillGoods: [],
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            showCoupop: false,
            couponPopList: [],
            coupon: [],
            enable: true,
            isShowDownload: false,
			recordList: [
				// {
				//   id: 1,
				//   bamboo: '190根',
				//   cash: '¥19',
				//   time: '2024年9月15日 12:10',
				//   status: '兑现中'
				// },
				// {
				//   id: 2,
				//   bamboo: '10根',
				//   cash: '¥1',
				//   time: '2024年9月15日 12:10',
				//   status: '已兑现'
				// }
			]
        }
    },
    async onLoad(options) {
		console.log('options---', options)
		
        this.headerAction = wx.createAnimation({
            delay: 0,
            duration: 100,
            timingFunction: 'ease-in-out'
        })
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        setTabbar()
        this.navHeight = app.globalData.navHeight

        console.log(this.appConfig)
        // #ifdef H5
        if (options && options.isapp == 1) {
            this.isShowDownload = true
        }
        // #endif
    },
    async onShow() {
		console.log('onShow')
		this.getWithdrawConfigFun()
		this.initWithdrawRecordsFun()
		
        // this.$nextTick(function () {
        //     getRect('.index').then((res) => {
        //         if (res.top == 0) {
        //             this.navBg = 0
        //         }
        //     })
        // })

        // #ifdef H5
        this.enable = true
        // #endif
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
        this.getWithdrawRecordsFun()
    },
    onPullDownRefresh() {
		this.getWithdrawConfigFun()
		this.initWithdrawRecordsFun()
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
      
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    setTabbar()
                }
            } catch (e) {
                uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		initWithdrawRecordsFun(){
			this.page = 1
			this.recordList = []
			this.status = loadingType.LOADING
			this.getWithdrawRecordsFun()
		},
		async getWithdrawRecordsFun() {
		    let { page, recordList, status } = this
		    const data = await loadingFun(withdrawRecords, page, recordList, status)
		    if (!data) return
		    this.page = data.page
		    this.recordList = data.dataList
		    this.status = data.status
		},
		getWithdrawConfigFun() {
			getWithdrawConfig().then(res => {
				if (res.code == 1) {
					this.widthDrawConfig = res.data
					console.log('this.widthDrawConfig ', this.widthDrawConfig)
				}
			});
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },
		handleExchange(){
			uni.navigateTo({
				url: `/bundle/pages/bamboo_exchange/bamboo_exchange`
			})
		}
    },
    computed: {
        ...mapGetters(['inviteCode', 'appConfig']),
		navBackground(){
			let resultBg = {}
			if(this.navBg > 0.5){
				resultBg = {
					backgroundImage:  `linear-gradient(90deg,  #569496 0%, #366667 100%)`
				}
			}
			return resultBg;
		},
    }
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100vh;
	background: #F5F5F5;
}

.main-box{
	padding: 20rpx;
	.desc-box{
		padding: 10rpx 20rpx 20rpx;
		.tit{
			font-weight: 500;
			font-size: 28rpx;
			color: #165859;
		}
		.num{
			font-weight: 700;
			font-size: 48rpx;
			color: #071919;
			line-height: 68rpx;
			margin: 12rpx 0 0rpx;
		}
		.line-img{
			width: 707rpx;
			height: 14rpx;
			margin: 6rpx auto 16rpx;
		}
		.sort-num-box{
			font-size: 28rpx;
			color: #165859;
			line-height: 40rpx;
			text{
				font-weight: 700;
				font-size: 32rpx;
			}
			.num1{
				margin-right: 160rpx;
			}
			.num2{
				
			}
		}
	}
	.record-box{
		background: #FFFFFF;
		border-radius: 16rpx;
		.hd{
			padding: 30rpx 30rpx 24rpx;
			border-bottom: 1rpx solid #DEEFEF;
			.th{
				font-size: 32rpx;
				color: #333333;
				line-height: 46rpx;
				flex: 1;
				text-align: center;
				&:nth-child(3){
					flex: 3;
				}
			}
		}
		.bd{
			padding: 20rpx 34rpx;
			.tr{
				margin-bottom: 40rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.td{
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: center;
					&:nth-child(3){
						flex: 3;
					}
				}
			}
		}
	}
}

.nav-bg{
	
}
.footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20rpx 30rpx;
	background: #FFF;
	padding-bottom:  calc(30rpx + env(safe-area-inset-bottom)); 
	.withdraw-btn{
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient( 90deg,  #79C5C6 0%,  #4B9FA0 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
}

.index {
	background: url(../../static/images/bamboo_exchange_bg.png) no-repeat;
    background-size: 100% 882rpx;
}
</style>
